<template>
  <div>
    <button @click="goToPaySuccess">测试</button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HelloWorld',
  data() {
    return {
      id: 3,
      intervalCode:null
    }
  },
  methods:{
    goToPaySuccess(){
      // 获取当前时间戳
      const timestamp = Date.now(); // 当前时间戳（毫秒）
      // 生成0到999之间的随机整数,后期可用用户ID代替,使得具有唯一性
      const randomNum = Math.floor(Math.random() * 1000);
      // 格式化随机数为三位数
      const formattedRandomNum = String(randomNum).padStart(3, '0');
      // 生成订单号
      const orderNumber = `${timestamp}${formattedRandomNum}`;
      window.open(`http://localhost:8090/alipay/pay?id=${this.id}&traceNo=${orderNumber}`)
      // alert('付款成功')
      this.intervalCode = setInterval(() => {
        axios.post('/alipay/query', {'traceNo': orderNumber}).then(res => {
          console.log(res.data)
          // clearInterval(this.intervalCode)
        }).catch(error => {
          console.log(error)
          // clearInterval(this.intervalCode)
        })
      }, 5000);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
